<template>
  <div class="request-party-service-manage">
    <div class="app-container">
      <div class="mainbox">
        <Header :header-name="$route.meta.title" />
        <div class="request-party-service-manage-body">
          <!-- 搜索板块 -->
          <el-form ref="form" :model="form" inline label-width="80px" class="search-form">

            <el-form-item prop="serviceName">
              <el-input v-model="form.serviceName" style="width: 200px;" clearable placeholder="提供方服务名称或编号" />
            </el-form-item>

            <el-form-item prop="provideName">
              <el-input v-model="form.provideName" style="width: 200px;" clearable placeholder="提供方系统名称或编号" />
            </el-form-item>

            <el-form-item prop="systemName">
              <el-input v-model="form.systemName" style="width: 200px;" clearable placeholder="请求方系统名称或编号" />
            </el-form-item>

            <el-form-item prop="applyName">
              <el-input v-model="form.applyName" style="width: 200px;" clearable placeholder="申请人" />
            </el-form-item>

            <el-form-item prop="applyTime">
              <el-date-picker
                v-model="applyTime"
                type="datetimerange"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                style="width: 200px;"
                :default-time="['00:00:00', '23:59:59']"
                value-format="yyyy-MM-dd HH:ss:mm"
              />
            </el-form-item>

            <el-form-item prop="sts">
              <el-select v-model="form.sts" placeholder="审核状态" clearable filterable>
                <el-option value="1" label="待审核" />
                <el-option value="2" label="已通过" />
                <el-option value="3" label="已拒绝" />
              </el-select>
            </el-form-item>

            <el-form-item class="query-action">
              <el-button type="primary" @click="getTableData"> 查询 </el-button>
              <el-button @click="resetBtn"> 重置 </el-button>
              <el-button @click="passOrRefuseBtn('', 2)"> 通过 </el-button>
              <el-button type="danger" @click="passOrRefuseBtn('', 3)"> 拒绝 </el-button>
            </el-form-item>
          </el-form>

          <!-- 表格数据视图 -->
          <div>
            <FlexTable
              v-loading="loading"
              border
              :data="tableData"
              :columns="columnsOptions"
              @selection-change="handleSelectionChange"
            />

            <el-pagination
              :page-size="pagination.pageSize"
              :current-page.sync="pagination.pageNo"
              layout="prev, pager, next, jumper"
              :total="pagination.totalPage"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>

        <!-- 服务详情 -->
        <el-dialog
          title="服务详情"
          :visible.sync="dialogVisible"
          width="800px"
        >

          <el-table
            :data="serviceItemList"
            border
            :show-header="false"
            style="width: 100%"
          >
            <el-table-column
              width="120"
            >
              <template slot-scope="{ row }">
                {{ row.label }}:
              </template>
            </el-table-column>
            <el-table-column>
              <template slot-scope="{ row }">
                {{ row.dictCode ?
                  getDictText(row.dictCode, serviceDetail[row.prop]) :
                  serviceDetail[row.prop] }}
              </template>
            </el-table-column>
          </el-table>

          <!--          <el-form ref="form" :model="serviceDetail" label-width="130px">-->
          <!--            <el-form-item label="服务名称: ">{{ serviceDetail.provideData.serviceName }}</el-form-item>-->
          <!--            <el-form-item label="系统名称: ">{{ serviceDetail.provideData.systemName }}</el-form-item>-->
          <!--            <el-form-item label="接口方式: ">{{ getDictText('interface_type', serviceDetail.provideData.interfaceType) }}</el-form-item>-->
          <!--            <el-form-item label="接口地址: ">{{ serviceDetail.provideData.interfaceAddress }}</el-form-item>-->
          <!--            <el-form-item label="接口协议: ">{{ getDictText('interface_protocol', serviceDetail.provideData.interfaceProtocol) }}</el-form-item>-->
          <!--            <el-form-item label="申请系统: ">{{ serviceDetail.applySystemName }}</el-form-item>-->
          <!--            <el-form-item label="申请原因: ">{{ serviceDetail.remarks }}</el-form-item>-->
          <!--          </el-form>-->
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">关闭</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import { checkPage, detail, updateUpSts } from '@/api/openServiceApplicationReview'
import dictMixin from '@/utils/mixins/dict'

export default {
  name: 'OpenServiceApplicationReview',
  mixins: [
    dictMixin(['interface_type', 'interface_protocol'])
  ],
  data () {
    return {
      applyTime: [],
      // 服务详情
      serviceDetail: {},
      serviceItemList: [
        { label: '服务名称', prop: 'serviceName' },
        { label: '系统名称', prop: 'systemName' },
        { label: '接口方式', prop: 'interfaceType', dictCode: 'interface_type' },
        { label: '接口地址', prop: 'interfaceAddress' },
        { label: '接口协议', prop: 'interfaceProtocol', dictCode: 'interface_protocol' },
        { label: '申请系统', prop: 'applySystemName' },
        { label: '申请原因', prop: 'remarks' }
      ],
      multipleSelection: [],
      dataList: null,
      dialogVisible: false,
      form: {},
      loading: false,
      tableData: [],
      columnsOptions: [
        { type: 'selection' },
        { label: '提供服务名称', prop: 'serviceName' },
        { label: '提供服务编号', prop: 'serviceCode' },
        { label: '提供系统名称', prop: 'provideSystemName' },
        { label: '申请人', prop: 'applyName' },
        { label: '申请时间', prop: 'applyTime' },
        { label: '申请系统名称', prop: 'applySystemName' },
        { label: '申请原因', prop: 'remarks' },
        { label: '状态', prop: 'sts',
          customRender: (scope) => {
            let tag
            if (scope.row.sts === '1') {
              tag = <el-tag>待审核</el-tag>
            } else if (scope.row.sts === '2') {
              tag = <el-tag type='success'>审核通过</el-tag>
            } else if (scope.row.sts === '3') {
              tag = <el-tag type='danger'>拒绝</el-tag>
            }
            return tag
          }
        },
        { label: '操作', width: 200,
          customRender: (scope) => {
            return [
              <el-button type='text' onClick={() => this.publicBtn(scope.row)}> 详情 </el-button>,
              scope.row.sts == '1' &&
              <el-button type='text' onClick={() => this.passOrRefuseBtn(scope.row, 2)}> 通过 </el-button>,
              scope.row.sts == '1' &&
              <el-button type='text' class='text-del-btn' onClick={() => this.passOrRefuseBtn(scope.row, 3)}> 拒绝 </el-button>
            ]
          }
        }
      ],
      pagination: {
        pageNo: 1,
        pageSize: 10
      }
    }
  },
  created() {
    this.getTableData()
  },
  methods: {
    publicBtn(val) {
      detail({ id: val.id }).then(res => {
        if (res.code == '00000') {
          this.dialogVisible = true
          this.serviceDetail = { ...val, ...res.data.provideData }
        } else {
          this.showMessage('error', '详情调用失败，请联系管理员')
        }
      })
    },
    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.getTableData()
    },
    handleCurrentChange(val) {
      this.pagination.pageNo = val
      this.getTableData()
    },
    getTableData() {
      this.loading = true
      const params = {
        pageNo: this.pagination.pageNo,
        pageSize: this.pagination.pageSize,
        ...this.form
      }
      if (this.applyTime) {
        params.applyStartTime = this.applyTime[0]
        params.applyEndTime = this.applyTime[1]
      }
      checkPage(params).then(res => {
        const { code, data } = res
        if (code === '00000') {
          this.tableData = data.rows
          this.pagination.totalPage = data.totalRows
        } else {
          this.showMessage('error', '无法获取表单数据')
        }
      }).finally(() => {
        this.loading = false
      })
    },

    // 通过/拒绝按钮
    passOrRefuseBtn (row, val) {
      if (this.multipleSelection.length === 0 && row === '') return this.$message.info('请选择要操作的数据')
      const f = this.multipleSelection.every(item => {
        return item.sts == '1'
      })
      if (!f) return this.$message.warning('不可修改已经审核过的数据')
      this.$confirm(`确定${val == 2 ? '通过' : '拒绝'}?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        updateUpSts({
          ids: row ? row.id.split(',') : this.multipleSelection.map(item => item.id),
          sts: val
        }).then(({ code, data }) => {
          if (code === '00000') {
            this.$message.success(`${val == 2 ? '通过' : '拒绝'}成功`)
            this.getTableData()
          }
        })
      })
    },
    resetBtn() {
      this.form = {}
      Object.assign(this.pagination, {
        pageNo: 1,
        pageSize: 10,
        totalPage: 0
      })
      this.applyTime = null
      this.getTableData()
    },
    addBtn() {
      this.$refs.addListRef.dialogVisible = true
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    showMessage(type, message) {
      this.$message[type](message)
    }
  }
}
</script>

<style lang="scss" scoped>
.request-party-service-manage {
  background: #F2F2F2;

  &-body {
    background: #fff;
    margin-top: 10px;
    padding: 20px;
    height: calc(100vh - 254px);
    overflow-y: auto;
  }
  .el-pagination {
    text-align: right;
    margin-top: 20px;
  }

  .el-tree {
    ::v-deep .el-tree-node__expand-icon {
      font-size: 18px;
    }
    .custom-tree-node {
      width: calc(100% - 30px);
      display: flex;
      align-items: center;
      padding-right: 20px;

      > span:first-child {
        display: inline-block;
        width: calc(100% - 50px);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        line-height: 40px;
      }

      .tree-btn {
        .el-switch {
          margin-top: -4px;
          margin-left: 10px;
        }
      }
    }
  }
}
</style>

